<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>学校网站</title>
</head>

<body>
    <div id="app">
        <!-- <localschool :shcoolpra="schoolparam"></localschool> -->
        <!-- <app></app> -->
    </div>
</body>

<!---用局部组件展示商品---->

<script>

    //全局组件的定义
    let student = Vue.component('student', {
        data: function () {
            return {
                name: 'XXX',
                desc: '快毕业了，不能毕业就失业了',
                salary: 5000
            }
        },
        template: "<h2>{{name}}---{{desc}}-----实习工资：{{salary}}</h2>"
    })

    Vue.component("school", {
        data: function () {
            return {
                name: '闽西职业技术学院'
            }
        },
        template: '<h2>{{name}}-----<student></student></h2>',
        components: {//组件里也可以添加组件
            student
        }
    })

    //局部组件
    let localstudent = {
        data: function () {
            return {
                name: 'XXX',
                desc: '快毕业了，不能毕业就失业了',
                salary: 5000
            }
        },
        props: ['stu'],
        template: "<h2>{{stu.dir2}}---{{stu.salary}}</h2>"
    }

    let localschool = {
        data: function () {
            return {
                //name: '闽西职业技术学院'
            }
        },
        props: ['shcoolpra'],
        template: '<h2>{{shcoolpra.name}}-----<localstudent v-for="student in shcoolpra.studentparam"  :stu="student" ></localstudent></h2>',
        components: {//组件里也可以添加组件
            localstudent
        }
    }


    let changpinjingli = {
        template: '<h2>经理</h2>'
    }

    let jishuzongjian = {
        template: '<h1>技术总监</h1>',
        components: {
            changpinjingli
        }
    }


    let app = {
        template:'<jishuzongjian></jishuzongjian>',
        components: {
            jishuzongjian:jishuzongjian,
        }
    }




    new Vue({
        el: "#app",
        data: {
            schoolparam: {
                name: '厦大',
                studentparam: [{
                    dir1: '就业',
                    dir2: '升本',
                    salary: 10000
                }]
            }
        },
        components: {//可以定义多个组件，但是实际开发中，往往定义一个app的组件，它去管理其它组件
            // localschool,
            app
        },
        template:"<app />"//<app></app> 也行
    })
</script>

//作业：写一个嵌套组件，商品目录组件嵌套商品（图片，价格，商品名 ......）组件，数据在 vm 实例中

</html>